﻿@section scripts {
    @Scripts.Render("~/bundles/app")
}

<div class="page-header">
    <h1>Books</h1>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">Books</h2>
            </div>
            <div class="panel-body">
                <table class="table table-striped" >
                    <thead>
                        <tr>
                            <th>作者</th>
                            <th>标题</th>
                            <th></th>
                    
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: books">
                        <tr>
                            <td data-bind="text: AuthorName"></td>
                            <td data-bind="text: Title"></td>
                            <td><small><a href="#" data-bind="click:$parent.getBookDetail">明细</a></small>&nbsp;&nbsp;<small><a href="#" data-bind="click:$parent.deleteBook">删除</a></small></td>

                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
        <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
    </div>

    <!-- ko if:detail() -->
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">明细</h2>
            </div>
            <table class="table">
                <tr><td>作者</td><td data-bind="text: detail().AuthorName"></td></tr>
                <tr><td>名称</td><td data-bind="text: detail().Title"></td></tr>
                <tr><td>年份</td><td data-bind="text: detail().Year"></td></tr>
                <tr><td>类型</td><td data-bind="text: detail().Genre"></td></tr>
                <tr><td>价格</td><td data-bind="text: detail().Price"></td></tr>
            </table>
        </div>
    </div>
    <!-- /ko -->

    <div class="col-md-4">
        <!-- TODO: Add new book -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">添加</h2>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" data-bind="submit: addBook">
                    <div class="form-group">
                        <label for="inputAuthor" class="col-sm-2 control-label">Author</label>
                        <div class="col-sm-10">
                            <select data-bind="options:authors, optionsText: 'Name', value: newBook.Author" class="form-control"></select>
                        </div>
                    </div>
                    <div class="form-group" data-bind="with: newBook">
                        <label for="inputTitle" class="col-sm-2 control-label">Title</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputTitle" data-bind="value:Title" />
                        </div>

                        <label for="inputYear" class="col-sm-2 control-label">Year</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inputYear" data-bind="value:Year" />
                        </div>

                        <label for="inputGenre" class="col-sm-2 control-label">Genre</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputGenre" data-bind="value:Genre" />
                        </div>

                        <label for="inputPrice" class="col-sm-2 control-label">Price</label>
                        <div class="col-sm-10">
                            <input type="number" step="any" class="form-control" id="inputPrice" data-bind="value:Price" />
                        </div>
                    </div>
                    <button type="submit" class="btn btn-default">提交</button>
                </form>
            </div>
        </div>

    </div>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">文件上传</h4>
            </div>
            <div class="modal-body">
                <div id="btncontainer">
                    <button id="pickfiles" type="button" class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-folder-open"></span> 选择文件
                    </button>
                </div>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th style="width:65%">文件名称</th>
                            <th style="width:15%">大小</th>
                            <th style="width:10%">进度</th>
                            <th style="width:10%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="filelist">
                        <tr>
                            <td><div>您的浏览器不支持Flash, Silverlight or HTML5.</div></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <!--<div class="alert alert-warning" id="console" style="display:block"></div>-->
                <button id="uploadfiles" type="button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-cloud-upload"></span> 上传
                </button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span style="cursor:pointer" class="glyphicon glyphicon-remove"></span>关闭</button>
            </div>
        </div>
    </div>
</div>
